﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Validate Attributes</title>


    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <style>
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
      #leftPane{
        overflow:hidden;
        border:none;
        color:#5C832F;
      }
      #map{
        border: solid medium #382513;
        padding:0;
      }

      .esriAttributeInspector{
          atiLayerName:'Building Details'
      }
      .templatePicker{
        border:none !important;
      }
      .templatePicker .grid .groupLabel{
        display:none;
      }
    </style> 

    <!-- specify dojo configuration to parse dijits at load time -->
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
        //require selection dijit
        dojo.require("esri.map");
        dojo.require("esri.dijit.editing.Editor-all");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.BorderContainer");

        var map;

        function init() {
          
            //代理路径
            esri.config.defaults.io.proxyUrl = "/proxy/";

            //创建自己的几何服务使用在您的应用程序。
            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            map = new esri.Map("map", {
                basemap: "topo",
                center: [-117.282, 34.289],
                zoom: 13,
                slider: false
            });

            dojo.connect(map, "onLayersAddResult", initEditor);
            //添加一个FeatureLayer
            var pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Notes/FeatureServer/0", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });

            map.addLayers([pointsOfInterest]);
        }

        function initEditor(results) {
   
            var featureLayer = results[0].layer;

            var templatePicker = new esri.dijit.editing.TemplatePicker({
                featureLayers: [featureLayer],
                rows: 'auto',
                groupingEnabled: false,
                columns: 1
            }, 'editorDiv');
            templatePicker.startup();



            var layerInfos = [{
                'featureLayer': featureLayer,
                'showAttachments': false,//无附件
                'showDeleteButton': false,//无按钮
                'fieldInfos': [
                  { 'fieldName': 'name', 'label': 'Name' },
                  { 'fieldName': 'email', 'label': 'Email' },           
                ]
            }];

            //定义编辑器设置
            var settings = {
                map: map,
                templatePicker: templatePicker,
                layerInfos: layerInfos
            };
            var params = { settings: settings };
            //创建Editor
            var editorWidget = new esri.dijit.editing.Editor(params);
            editorWidget.startup();


            map.infoWindow.resize(295, 245);
        }

        dojo.ready(init);
    </script>
  </head>
  <body class="claro">    
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;"  data-dojo-props="region:'left'">
        <div id="editorDiv"></div>
        <div></div>
      </div>
    </div>
  </body>
</html>